

window.addEventListener('load', function () {

    var ol = this.document.querySelector('.loading');
    var ipt = document.querySelector('.stor');
    var set = document.querySelector('.buttonup');
    var remove = document.querySelector('.buttondown');
    var i = 0, num = 0;
    //如果有数据则进行循环
    while (this.localStorage.getItem(i++)) {
        num = i;
    }
    for (i = 0; i < num; i++) {
        var lip = document.createElement('li');
        lip.setAttribute('index', i);
        var indexp = lip.getAttribute('index');
        lip.innerHTML = localStorage.getItem(indexp) + "<a href='javascrip:;'>删除</a> ";
        ol.appendChild(lip);
    }

    set.addEventListener('click', function () {
        for (i = 0; i < ol.children.length; i++);
        var li = document.createElement('li');
        li.setAttribute('index', i);
        var index = li.getAttribute('index');
        var val = ipt.value;
        localStorage.setItem(index, val);
        // 3、把li插入ol,记录当前小圆圈的索引号
        li.innerHTML = localStorage.getItem(index) + "<a href='javascrip:;'>删除</a> ";
        ol.appendChild(li);
        var as = document.querySelectorAll('a');
        // 删除当前备注
        for (i = 0; i < as.length; i++) {
            as[i].onclick = function () {
                ol.removeChild(this.parentNode);
                localStorage.removeItem(i);
            }
        }
    })
    // 清除所有存储内容
    remove.addEventListener('click', function () {
        localStorage.clear();
    })
})